<template>
    <div id="live-teacher-player"></div>
</template>

<script>
let store = BJY.store
let auth = BJY.auth
let eventEmitter = BJY.eventEmitter
let userData = BJY.data.user
export default {
  components: {},
  data () {
    return {
      player: null
    }
  },
  computed: {},
  watch: {
  },
  methods: {
    //   创建老师播放器
    createTeacherPlayer () {
      this.player = BJY.DefaultThemePlayer.create({
        element: $('#live-teacher-player'),
        replace: false,
        user: store.get('teacher'),
        extension: BJY.getExtension(),
        canSwitchCamera: true,
        canSwitchMic: true,
        onComplete: function () {
          eventEmitter.trigger(eventEmitter.MEDIA_SWITCH_TRIGGER, {
            videoOn: true,
            audioOn: true
          })
        }
      })
    }
  },
  created () {
  },
  mounted () {
    this.createTeacherPlayer()
    eventEmitter.on(
      // 监听自己摄像头和麦克风变化
      eventEmitter.MEDIA_SWITCH_TRIGGER,
      function (event, data) {
        var player = BJY.Player.instances[store.get('user.id')]
        player && BJY.userPublish.setDevice(player, data.videoOn, data.audioOn)
      }
    ).on(eventEmitter.CLASS_START, () => {
      if (this.player) {
        this.player.destroy()
      }
      this.createTeacherPlayer()
    })
  },
  beforeDestroy () {}
}
</script>

<style lang='less'>
#live-teacher-player {
  width: 100%;
  height: 100%;
}
</style>
